<template>
    <el-row>
        <el-col border class="records-search">
            <el-form :inline="true" :model="guestbookForm" class="demo-form-inline" size="small">

                <el-form-item label="学部">
                    <el-select v-model="guestbookForm.faculty" placeholder="请选择" clearable style="width: 100px;" >
                        <el-option v-for="item in facultys" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </el-form-item>

                <el-form-item label="学生">
                    <el-input v-model="guestbookForm.stu" placeholder="请输入学号或姓名" clearable style="width: 160px;" />
                </el-form-item>

                <el-form-item label="时间" style="width: 380px;">


                    <el-date-picker
                        v-model="guestbookForm.time"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY-MM-DD HH:mm:ss"
                        time-format="HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    
    
    <el-table :data="tableData" border size="small" style="width: 100%" height="calc(100vh - 190px)" v-loading="loading">
            <el-table-column fixed  prop="hcNo" label="序号"  width="120">
                <template #default="scope">
                    <el-link :underline="false" @click="onEdit(scope.row)">{{ scope.row.hcNo }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="sno" label="学号"  width="120"/>
            <el-table-column prop="snameC" label="姓名"  width="120"/>
            <el-table-column prop="clscode" label="班級"  width="80"/>
            <el-table-column prop="sDate" label="就诊时间"  width="200"/>
            <el-table-column prop="cname" label="症状"  width="140" :formatter="formatGroups"/>
            <el-table-column prop="place" label="发生地点"  width="160" :formatter="formatPlace"/>
            <el-table-column prop="eDate" label="离开时间" width="200"/>
            <el-table-column prop="causeNo" label="意外原因" :formatter="formatCause"/>
            <el-table-column prop="empID" label="处理人员"  width="160"  :formatter="formatEmp"/>
            <el-table-column prop="email" label="操作" >
                <template #default="scope">
                    <el-button size="small" type="danger" @click="onDel(scope.row)" >
                        删除
                    </el-button>
                </template>
            </el-table-column>
    </el-table>

    <div style="margin: 20px 0;"></div>

    <el-pagination
        size="small"
        background
        layout="prev, pager, next"
        :total="totalData"
        :page-size="30"
        class="mt-4"
        @change="changePage"
    />

</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getListPage, deleteInfo } from '@/api/registers'
import useSystemInitStore from '@/stores/init'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'

import useRegUserStore from '@/stores/registersUserStore'

/// 挂号用户信息
const regUserStore = useRegUserStore()
const regStore = storeToRefs(regUserStore)

/// 系统信息
const systemInitStore = useSystemInitStore()

const tableData = ref([])
const totalData = ref(0)
const loading = ref(true)
const router = useRouter()

const facultys = [
  {
    value: 'B',
    label: '小学部',
  },
  {
    value: 'I',
    label: '中学部',
  },
]

onMounted(() => {
    if(systemInitStore.groups && systemInitStore.groups.children) {
        loadData()
    } else {
        ElMessage.error('系统初始化数据加载失败。')
    }
})

const onDel = (data) => {
    deleteInfo({'hcNo': data.hcNo}).then(res => {
        if ( res.code == 200 ) {
            ElNotification({
                title: '删除成功',
                type: 'success',
            })
            loadData()
        } else {
            ElMessage.error('数据加载失败。')
        }
    })
}


const onEdit = (data) => {
    regUserStore.setRegInfo(data);
    router.push({name: 'editRecord'})
}

const onSearch = () => {
    
    if(guestbookForm.time) {
        guestbookForm.sTime = guestbookForm.time[0]
        guestbookForm.eTime = guestbookForm.time[1]
    } else {
        guestbookForm.sTime = ''
        guestbookForm.eTime = ''
    }
    loadData()
}

const guestbookForm = reactive({
    page: 1,
    size: 30,
    tel: '',
    name: '',
    stu: '',
    faculty: '',
    time: '',
    sTime: '',
    eTime: ''
})

const loadData = () => {
    loading.value = true
    getListPage(guestbookForm).then(res => {
        if ( res.code == 200 ) {
            tableData.value = res.data.rows
            totalData.value = res.data.total
            loading.value = false
        } else {
            ElMessage.error('数据加载失败。')
        }
    })
}

const changePage = (currentPage, pageSize) => {
    guestbookForm.page = currentPage
    loadData()
}




const formatGroups = (row, column, cellValue) => {
    const symNo = row.symNo
    if(symNo) {
        const groups1 = systemInitStore.groups.children.find(r=> symNo.indexOf('02^'+r.id) == 0 );
        if(groups1 && groups1.children) {
            const groups2 = groups1.children.find(e => symNo.indexOf('02^'+groups1.id+'^'+e.id) == 0)
            if(groups2) {
                return groups2.label
            }
        }
        
    }
    return ' - ';
}

const formatPlace = (row, column, cellValue) => {
    const place = systemInitStore.places.find( it => it.pno == row.place )
    if(place) {
        return place.pname
    }
    return ' - '
}

const formatCause = (row, column, cellValue) => {
    const causes = systemInitStore.causes.find(r => r.cno == row.causeNo);
    if(causes) {
        return causes.cname;
    }
    return ' - ';

}

const formatEmp = (row, column, cellValue) => {
    return row.empName? row.empName + '['+row.empID+'] ' : row.empID;
}
</script>

<style>
    .records-search {
        height: 50px;
        border: 1px solid var(--el-border-color);
        border-radius: var(--el-border-radius-base);
        margin-bottom: 8px;
        line-height: 42px;
        padding: 0px 10px;
        .el-form-item--small {
            margin-bottom: 0px;
        }
        .el-form-item {
            margin-bottom: 0px;
        }
    }
    .registers-scrollbar {
        height: calc(100vh - 225px);
    }
</style>
